import React, { useState, useEffect } from 'react';

import Header from './Header';
import CanvasContainer from './CanvasContainer';
import PlayButton from './PlayButton';
import BGM from './BGM';

import { getLotteryCode, getLottery, getLotteryResult, setLotteryResult, setLotteryCode } from '../store/index';
import { shuffle, speed } from '../utils/index';

import './Home.scss';
import { message } from 'antd';

let timer = null;
let type = 0;
let shuffleResult = [];

export default function Home() {
    const [playState, setPlayState] = useState(false);
    const [visible, setVisible] = useState(false);
    shuffleResult = getLotteryCode();

    const playChangeHandle = (state, lotteryType) => {
        setPlayState(state);

        if (state) {
            if (lotteryType !== undefined) {
                window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
                // 每100ms打乱一次
                timer = setInterval(() => {
                    shuffleResult = shuffle(shuffleResult);
                    setLotteryCode(shuffleResult)
                }, 100);
                type = lotteryType;
            }
        } else {
            if (timer) {
                const item = getLottery().find(item => item.key === type);
                if (!item) {
                    message.error('异常：未获取到奖项');
                    return;
                }

                const luckyLotteryCode = shuffleResult.splice(0, item.number);

                if (item) {
                    setLotteryResult(type, luckyLotteryCode);
                    setLotteryCode(shuffleResult);
                    setVisible(true);
                }

                clearInterval(timer);
                timer = null;
                shuffleResult = [];
            }

            window.TagCanvas.SetSpeed('rootcanvas', speed());
        }
    };

    useEffect(() => {
        window.TagCanvas.Start('rootcanvas', 'tags', {
            textColour: null,
            initial: speed(),
            dragControl: 1,
            textHeight: 20,
            noSelect: true,
            lock: 'xy'
        });
    }, []);

    const Result = () => {
        const lotteryResult = getLotteryResult(type);
        if (!lotteryResult) {
            return '';
        }

        return (
            <div onClick={() => setVisible(false)} className="resbox" style={{
                display: visible ? 'flex' : 'none'
            }}>
                <p>{ lotteryResult.name }抽奖结果：</p>
                <div className="container">
                    {
                        lotteryResult.result.map((item, index) => {
                            return (
                                <span className="itemres" key={index}>
                                    <span className="cont">
                                        <span>{ item.key }</span>
                                    </span>
                                </span>
                            )
                        })
                    }
                </div>
            </div>
        )
    };

    return (
        <div className="home">
            <Header type={type} />
            <div className="home__container">
                <div className="tools">
                    <BGM playState={playState} />
                    <PlayButton state={playState} onChange={playChangeHandle} />
                </div>
                <div style={{
                    filter: visible ? 'blur(10px)' : ''
                }}>
                    <CanvasContainer />
                </div>
                <Result />
            </div>
        </div>
    );
}